{% extends 'preheat/base.html' %}

{% block title %}垂直表单示例 - CDN预热平台{% endblock %}

{% block page_title %}垂直表单示例{% endblock %}

{% block content %}
<div class="card shadow-sm">
    <div class="card-header bg-light py-3">
        <h3 class="mb-0">垂直表单布局示例</h3>
    </div>
    <div class="card-body p-4">
        <form id="vertical-form" method="post" class="needs-validation" novalidate>
            {% csrf_token %}
            
            <!-- 单列垂直布局的表单字段 -->
            <div class="form-group mb-4">
                <label for="id_ip" class="form-label fw-medium">IP地址 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="id_ip" name="ip" maxlength="20" required>
                <div class="form-text text-muted">请输入服务器的IP地址</div>
                <div class="invalid-feedback">请输入有效的IP地址</div>
            </div>
            
            <div class="form-group mb-4">
                <label for="id_ssh_port" class="form-label fw-medium">SSH端口 <span class="text-danger">*</span></label>
                <input type="number" class="form-control" id="id_ssh_port" name="ssh_port" value="22" required>
                <div class="form-text text-muted">默认SSH端口为22</div>
                <div class="invalid-feedback">请输入有效的端口号</div>
            </div>
            
            <div class="form-group mb-4">
                <label for="id_ssh_password" class="form-label fw-medium">SSH密码 <span class="text-danger">*</span></label>
                <input type="password" class="form-control" id="id_ssh_password" name="ssh_password" maxlength="100" required>
                <div class="form-text text-muted">请输入SSH连接密码</div>
                <div class="invalid-feedback">请输入SSH密码</div>
            </div>
            
            <div class="form-group mb-4">
                <label for="id_remark" class="form-label fw-medium">备注</label>
                <input type="text" class="form-control" id="id_remark" name="remark" maxlength="200">
                <div class="form-text text-muted">可选，添加服务器备注信息</div>
                <div class="invalid-feedback">备注格式不正确</div>
            </div>
            
            <!-- 下拉选择框示例 -->
            <div class="form-group mb-4">
                <label for="id_server_type" class="form-label fw-medium">服务器类型</label>
                <select class="form-select" id="id_server_type" name="server_type">
                    <option value="">请选择服务器类型</option>
                    <option value="web">Web服务器</option>
                    <option value="database">数据库服务器</option>
                    <option value="cache">缓存服务器</option>
                    <option value="other">其他</option>
                </select>
                <div class="form-text text-muted">选择服务器的类型</div>
                <div class="invalid-feedback">请选择服务器类型</div>
            </div>
            
            <!-- 文本区域示例 -->
            <div class="form-group mb-4">
                <label for="id_description" class="form-label fw-medium">详细描述</label>
                <textarea class="form-control" id="id_description" name="description" rows="4"></textarea>
                <div class="form-text text-muted">请输入服务器的详细描述信息</div>
                <div class="invalid-feedback">描述格式不正确</div>
            </div>
            
            <!-- 复选框示例 -->
            <div class="form-group mb-4">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="id_active" name="active">
                    <label class="form-check-label" for="id_active">
                        立即激活服务器
                    </label>
                    <div class="form-text text-muted">勾选此项将立即激活服务器</div>
                </div>
            </div>
            
            <!-- 单选框示例 -->
            <div class="form-group mb-4">
                <label class="form-label fw-medium">服务器状态</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="status" id="status_online" value="online">
                    <label class="form-check-label" for="status_online">
                        在线
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="status" id="status_offline" value="offline">
                    <label class="form-check-label" for="status_offline">
                        离线
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="status" id="status_maintenance" value="maintenance">
                    <label class="form-check-label" for="status_maintenance">
                        维护中
                    </label>
                </div>
            </div>
            
            <!-- 文件上传示例 -->
            <div class="form-group mb-4">
                <label for="id_config_file" class="form-label fw-medium">配置文件</label>
                <input type="file" class="form-control" id="id_config_file" name="config_file">
                <div class="form-text text-muted">上传服务器配置文件（可选）</div>
                <div class="invalid-feedback">请选择有效的配置文件</div>
            </div>
            
            <!-- 表单按钮 -->
            <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                <a href="#" class="btn btn-secondary px-4">
                    <i class="fas fa-times me-2"></i>取消
                </a>
                <button type="submit" class="btn btn-primary px-4">
                    <i class="fas fa-save me-2"></i>提交
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    /* 表单控件样式优化 */
    .form-control {
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        padding: 0.75rem 1rem;
        transition: all 0.2s ease-in-out;
    }
    
    .form-control:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    /* 表单选择框样式优化 */
    .form-select {
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        padding: 0.75rem 1rem;
        transition: all 0.2s ease-in-out;
    }
    
    .form-select:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    /* 表单标签样式优化 */
    .form-label {
        font-weight: 500;
        color: #2c3e50;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    /* 表单组样式优化 */
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    /* 按钮样式优化 */
    .btn {
        border-radius: 0.375rem;
        font-weight: 500;
        padding: 0.5rem 1.5rem;
        transition: all 0.2s ease-in-out;
    }
    
    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
        border-color: #0062cc;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
    }
    
    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
    }
    
    /* 卡片样式优化 */
    .card {
        border-radius: 0.5rem;
        border: none;
        overflow: hidden;
    }
    
    .card-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }
    
    /* 表单验证反馈样式 */
    .invalid-feedback {
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: none;
    }
    
    .was-validated .form-control:invalid ~ .invalid-feedback,
    .was-validated .form-select:invalid ~ .invalid-feedback {
        display: block;
    }
    
    /* 表单帮助文本样式 */
    .form-text {
        font-size: 0.8rem;
        margin-top: 0.25rem;
        color: #6c757d;
    }
    
    /* 必填字段标记样式 */
    .text-danger {
        font-weight: bold;
    }
    
    /* 复选框和单选框样式优化 */
    .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.3em;
    }
    
    .form-check-label {
        padding-left: 0.5rem;
        margin-bottom: 0;
    }
    
    .form-check {
        padding-left: 1.8em;
        margin-bottom: 0.5rem;
    }
    
    /* 文本区域样式优化 */
    textarea.form-control {
        min-height: 100px;
    }
    
    /* 文件上传样式优化 */
    input[type="file"].form-control {
        padding: 0.5rem 0.75rem;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 表单验证
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // 获取所有需要验证的表单
                var forms = document.getElementsByClassName('needs-validation');
                
                // 循环遍历并阻止提交
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    });
</script>
{% endblock %}